<template>
    <div class="rgba_box" v-show="navsShow">
        <div class="top2" style="background: #fff">
            <div class="header">
                <h3 class="title" style="color: #333333">武汉纺友党支部</h3>
                <div>
                    <i @click="toSearch" class="iconfont iconxuanchuan_icon_sousuo"
                       style="color:#999999;font-size:19px;"></i>
                    <i @click="toInformation" class="iconfont iconxuanchuan_icon_xiaoxi"
                       style="color:#999999;font-size:19px;"></i>
                </div>
            </div>
            <div class="nav_info">
                <div class="nav_header">
                    <span>全部分类</span>
                    <img src="@as/img/xuanchuan_close@2x.png" alt="" @click="hideNavshow">
                </div>
                <ul>
                    <li v-for="(item,index) in Navsenior" :key="index" @click.stop="navToIndex(item,index)">
                        {{item.class_name}}
                        <!--<router-link :to="{path:item.link}">{{item.class_name}}</router-link>-->
                    </li>

                    <!--<li>-->
                        <!--<router-link to='/propaganda'>推荐</router-link>-->
                    <!--</li>-->
                    <!--<li>-->
                        <!--<router-link to='/propaganda/love'>一颗红心</router-link>-->
                    <!--</li>-->
                    <!--<li>-->
                        <!--<router-link to='/propaganda/news'>党建新闻</router-link>-->
                    <!--</li>-->
                    <!--<li>-->
                        <!--<router-link to='/propaganda/album'>党建相册</router-link>-->
                    <!--</li>-->
                    <!--<li>-->
                        <!--<router-link to='/propaganda/video'>党建微视</router-link>-->
                    <!--</li>-->
                    <!--<li>-->
                        <!--<router-link to='/propaganda/news'>党章党规</router-link>-->
                    <!--</li>-->
                    <!--<li>-->
                        <!--<router-link to='/propaganda/news'>重要讲话</router-link>-->
                    <!--</li>-->
                    <!--<li>-->
                        <!--<router-link to='/propaganda/news'>扶贫动态</router-link>-->
                    <!--</li>-->
                    <!--<li>-->
                        <!--<router-link to='/propaganda/news'>反腐倡廉</router-link>-->
                    <!--</li>-->

                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapState,mapMutations} from 'vuex'
    export default {
        name: "navsshow",
        data() {
            return {Subnavigation: []}
        },
        props: {
            navsShow: {
                type: Boolean
            }
        },
        computed:{
            ...mapState({
                Navsenior:state=>state.initNews.Navsenior.Navsenior||JSON.parse(localStorage.getItem('Navsenior'))
            })
        },
        methods: {
            ...mapMutations(['saveSelectedId','changeSubNav']),
            hideNavshow() {
                this.$emit('update:navsShow', false)
            },
            navToIndex(item,index){
                // this.$emit('update:navsShow', false);
                this.$emit('changeSelect',item,index);
                console.log(this.Navsenior[index].id+'Navsenior');
                this.changeSubNav({
                    class_id: this.Navsenior[index].id,
                    status:this.Navsenior[index].status,
                    selectedId:this.selectedId
                });
                // localStorage.setItem('subNavData',{
                //     class_id: this.Navsenior[index].id,
                //     status:this.Navsenior[index].status,
                //     selectedId:this.selectedId
                // });
                this.$store.commit('changeIndex',{
                    selectName:item.class_name
                });
                this.saveSelectedId({
                    selectedId:index,
                });
                this.$router.push({
                    path:item.link
                })
            },
            /**消息跳转*/
            toInformation() {
                if (this.selectedId==0){
                    this.$router.push('propaganda/details/information')
                } else {
                    this.$router.push('details/information')
                }
            },
            /**搜索*/
            toSearch() {
                if (this.selectedId==0){
                    this.$router.push({path: "propaganda/details/search"})
                } else {
                    this.$router.push({path: "details/search"})
                }
            },
            /*
            * 顶级导航
            */
            seniorNav() {
                this.$http
                    .get("app/My/class_list", {
                        uid: JSON.parse(Cookies.get("user_71ydj")).id,
                    })
                    .then(res => {
                        res.data.forEach(e => {
                            e.label = e.class_name;
                        })
                        this.Subnavigation = res.data;
                    });
            },
        },
        mounted(){
            console.log(this.$store.state.initNews.Navsenior.Navsenior)
            console.log(this.Navsenior)
            this.Navsenior.forEach((e,index)=>{
                if (e.class_name == '推荐') {
                    e.link = '/propaganda'
                }
                if (e.class_name == '一颗红心') {
                    //this.Navsenior[index].id
                    e.link = '/propaganda/love';
                }
                if (e.class_name == '党建新闻') {
                    e.link = '/propaganda/news';

                }
                if (e.class_name == '组织动态') {
                    e.link = '/propaganda/news';
                    console.log(this.Navsenior[index].id)

                }
                if (e.class_name == '党纪党规') {
                    e.link = '/propaganda/news';
                }
                if (e.class_name == '扶贫动态') {
                    e.link = '/propaganda/news';

                }
                if (e.class_name == '反腐倡廉') {

                    e.link = '/propaganda/news';

                }
                if (e.class_name == '扶贫动态') {
                    e.link = '/propaganda/news';
                }
                if (e.class_name == '党建相册') {
                    e.link = '/propaganda/album';
                }
                if (e.class_name == '党建微视') {
                    e.link = '/propaganda/video'
                }
                if (e.class_name == '专题学习') {
                    e.link = '/propaganda/news';
                }
            })
            console.log(this.Navsenior)
        }
    }
</script>

<style scoped>
    .rgba_box {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, .36);
        z-index: 9999999;
    }

    .top2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9;
    }

    .nav_info {
        width: 343px;
        margin: 29px 16px 11px;
    }

    .nav_header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-size: 14px;
        color: #333;
    }

    .nav_header img {
        width: 13px;
        height: 13px;
    }

    .nav_info ul {
        display: flex;
        flex-flow: wrap;
        justify-content: flex-start;
        margin-top: 23px;
    }
    .nav_info ul{
        margin-left: -5px;
    }
    ul:after {
        content: '';
        width: 162px;
    }
    .nav_info li {
        width: 76px;
        height: 30px;
        background: #f8f8f8;
        border-radius: 2px;
        font-size: 12px;
        color: #666666;
        text-align: center;
        margin:0 5px;
        margin-bottom: 12px;
        line-height: 30px;
        overflow: hidden;
    }
    .nav_info li:nth-child(4n){
        margin-right: -5px;
    }

    .header {
        width: 359px;
        padding: 15px 0 0 16px;
        display: flex;
        justify-content: space-between;
    }

    .title {
        margin: 0 !important;
        font-size: 19px;
        font-weight: bold;
        color: #fff;
    }

    .header div {
        display: flex;
        align-items: center;
        width: 60px;
        justify-content: space-between;
    }

    .top img {
        width: 19px;
        height: 19px;
    }

</style>
